<template>
    <div class="search">
        <div class="search_header">
            <input type="text" placeholder="家常菜" v-model="text" @keydown.enter="search_enter">
            <router-link to="/index/focus">
                <button>取消</button>
            </router-link>
        </div>
        <div class="search_bottom">
            <h3>热门搜索</h3>
            <div v-if="myloading" class="loading">
                <van-loading size="100px" color="#ec344e" />
            </div>
            <div class="suggests" v-else>
                <div class="suggest" v-for="(item,i) in hot" :key="i" @click="foo(item)">
                    {{ item.name }}
                </div>
            </div>
            
        </div>
    </div>
</template>

<script>
    // 做网络请求，导入api
    import { search_hot } from '../api/index'
    import { Toast } from 'vant'
    export default {
        data(){
            return {
                hot: [],
                text: '',
                myloading: false
            }
        },
    
        // 初始化
       async created(){
        this.myloading = true;
            await search_hot()
            .then(
                content=> {
                    console.log('--->',content.result.suggests);
                    let banners = content.result.suggests;
                    this.hot = banners;
                }
            )
            // 请求之后
            setTimeout(() => {
                // 隐藏loading
                this.myloading = false;
            }, 500);
        },
        methods: {
            search_enter(){
                let text = this.text;
                if(text == ''){
                    Toast("输入框为空!");
                    return false;
                }
                this.$router.push({
                    name: 'searchDetail',
                    params: { keyword: this.text},
                });
            },
            foo(item){
                this.text = item.name;
                console.log(this.text);
                this.search_enter();
            }
        },
    }
</script>

<style lang="less">
    .search{
        width: 100%;
        .search_header{
            display: flex;
            width: 100%;
            padding: 10px;
            input{
                color: rgba(192,196,204);
                background-color: #eee;
                height: 35px;
                border-radius: 4px;
                padding: 15px;
                font-size: 15px;
                width: 85%;
            }
            a{
                button{
                    font-size: 12px;
                    margin-left: 15px;
                    background-color: transparent;
                }
            }
        }
        .search_bottom{
            padding: 10px;
            h3{
                font-size: 14px;
                margin-bottom: 10px;
            }
            .loading{
                width: 100%;
                margin-top: 100px;
                padding-left: 35%;
            }
            .suggests{
                display: flex;
                flex-wrap: wrap;
                .suggest{
                    border: 1px solid black;
                    font-size: 16px;
                    margin: 0 10px 10px 0;
                    padding: 4px 6px;
                    border-radius: 4px;
                }
                .suggest:nth-child(1){
                    border: 1px solid red;
                    color: red;
                }
                .suggest:nth-child(2){
                    border: 1px solid red;
                    color: red;
                }
            }
        }
    }
</style>